<!-- 饼图 -->
<template>
    <el-card>
        <template #header> 热点房型统计（{{ dateNow.getFullYear() + '/01/01' }}-{{ dateNow.toLocaleDateString() }}） </template>
        <div v-loading="loading" :id="id" :class="className" :style="{ height, width }"></div>
    </el-card>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { markRaw, onActivated, onMounted, ref } from "vue";
import axios from 'axios'
import { baseURL_dev } from '@/config/baseURL'
const baseURL = baseURL_dev

const props = defineProps({
    id: {
        type: String,
        default: "pieChart",
    },
    className: {
        type: String,
        default: "",
    },
    width: {
        type: String,
        default: "200px",
        required: true,
    },
    height: {
        type: String,
        default: "200px",
        required: true,
    },
});


const chart = ref<any>("");
const loading = ref<boolean>(true);
const dateNow = new Date()
//获取统计数据
function getStatisticsData() {
    axios.get(baseURL + "DataStatistics/GetHotRoomTypes").then(res => {
        console.log(res.data);
        var chartData = []
        var options = {}
        if (res.data.Data != null) {
            chartData = res.data.Data.Data.map((item: any) => {
                return {
                    value: item.RoomTypeCount,
                    name: item.RoomTypeName,
                };
            });
        }

        options = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                    crossStyle: {
                        color: "#999",
                    },
                },
            },
            grid: {
                left: "2%",
                right: "2%",
                bottom: "10%",
                containLabel: true,
            },
            legend: {
                top: "bottom",
                textStyle: {
                    color: "#999",
                },
            },
            series: [
                {
                    //name: "Nightingale Chart",
                    type: "pie",
                    radius: [50, 130],
                    center: ["50%", "50%"],
                    roseType: "area",
                    itemStyle: {
                        borderRadius: 1,
                        color: function (params: any) {
                            //自定义颜色
                            const colorList = ["#409EFF", "#67C23A", "#F56C6C", "#909399", "#C0C4CC", "#E6A23C", "#EB9E7", "#66B1FF", "#91CC75", "#FFA07A"];
                            /* var letters = '0123456789ABCDEF';
                            var color = '#';
                            do {
                                for (var i = 0; i < 6; i++) {
                                    color += letters[Math.floor(Math.random() * 16)];
                                }
                            } while (color === '#FFFFFF' || color === '#000000'); */

                            return colorList[params.dataIndex];
                        },
                    },
                    data: chartData
                },
            ],
        };
        chart.value = markRaw(
            echarts.init(document.getElementById(props.id) as HTMLDivElement)
        );

        chart.value.setOption(options);

        window.addEventListener("resize", () => {
            chart.value.resize();
        });

        loading.value = false;
    })
}

onMounted(() => {
    getStatisticsData();

});

onActivated(() => {
    getStatisticsData();
    if (chart.value) {
        chart.value.resize();
    }
});
</script>
